<template>
  <template v-if="roleTree.length">
    <SuperTable
      ref="superTableRef"
      search
      pager
      border
      align="center"
      header-title="角色管理"
      :columns="columns"
      :data-request="fetchData"
      :export-config="{}"
      @checkbox-change="checkboxChangeFn"
      @checkbox-all="checkboxChangeFn"
    >
      <template #action>
        <!--      <span class="check-num">-->
        <!--        当前已选中-->
        <!--        <span style="margin: 0 5px; color: #1f59f7">{{ state.checkedList.length }}</span>-->
        <!--        条数据-->
        <!--      </span>-->
        <!--      <Dropdown>-->
        <!--        <template #overlay>-->
        <!--          <Menu @click="changeStateFn">-->
        <!--            <a-menu-item key="1">启用</a-menu-item>-->
        <!--            <a-menu-item key="0">禁用</a-menu-item>-->
        <!--          </Menu>-->
        <!--        </template>-->
        <!--        <Button :disabled="!state.checkedList.length" type="primary">批量操作</Button>-->
        <!--      </Dropdown>-->
        <Button type="primary" @click="showModalFn('新增')"><plus-outlined />添加角色</Button>
      </template>
    </SuperTable>

    <RmEditModal v-model:show-modal="state.showModal" :data="state.currentData" :title="state.currentTitle" @edit-modal-ok="refreshTableFn" />
  </template>
</template>

<script setup lang="ts">
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import RmEditModal from '@/modules/platform-management/pages/role-management/components/rm-edit-modal.vue';
import { VxeGridPropTypes } from 'vxe-table';
import type { TableColumnItem } from './columns';
import { baseColumns, roleTree } from './columns';
import { reactive, ref } from 'vue';
import Button from '@/framework/components/basic/button/button.vue';
import { message, Menu, Dropdown, Modal } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { roleDelete, roleSearch, roleEnable, roleDisable } from '@/api/role-data';

/**
 * data
 */
const state = reactive({
  currentTitle: '',
  showModal: false,
  currentData: {},
  checkedList: [],
});

/**
 * fn
 */
const showModalFn = (params: string) => {
  if (params === '新增') {
    state.currentData = {};
  }
  state.currentTitle = params;
  state.showModal = true;
};
// 角色禁用启用功能
// const changeStateFn = async (e) => {
//   Modal.confirm({
//     title: '确认操作',
//     content: '确认要进行本次操作？',
//     onOk: async () => {
//       if (e.key === '1') {
//         await Promise.all(
//           state.checkedList.map(async (item: any) => {
//             await roleEnable(item.id);
//           }),
//         );
//       } else {
//         await Promise.all(
//           state.checkedList.map(async (item: any) => {
//             await roleDisable(item.id);
//           }),
//         );
//       }
//       message.success('操作成功！');
//       refreshTableFn();
//     },
//   });
// };

/**
 * table
 */
const superTableRef = ref<InstanceType<typeof SuperTable>>();
const columns: TableColumnItem[] = [
  ...baseColumns,
  {
    title: '操作',
    field: '$action',
    hideInSearch: true,
    align: 'center',
    fixed: 'right',
    width: 200,
    actions: ({ row }) => [
      {
        label: '修改',
        onClick: () => {
          state.currentData = row;
          showModalFn('修改');
        },
      },
      {
        label: '删除',
        popConfirm: {
          title: `确认要删除该角色？`,
          onConfirm: async () => {
            await roleDelete(row.id);
            message.success('操作成功！');
            refreshTableFn();
          },
        },
      },
    ],
  },
];
const fetchData = async (ori: VxeGridPropTypes.ProxyAjaxQueryParams) => {
  let data = superTableRef.value?.getFormModel();
  let params = {
    pageSize: ori.page.pageSize,
    pageNum: ori.page.currentPage,
    orderBy: [
      {
        field: 'createTime',
        order: 'desc',
      },
    ],
    ...data,
  };
  let res = await roleSearch(params);
  return {
    data: res.result,
    pageIndex: 1,
    pageSize: 10,
    total: 100,
  };
};
const refreshTableFn = () => {
  superTableRef.value?.refreshTable();
};
const checkboxChangeFn = ({ records }) => {
  state.checkedList = records;
};
</script>

<style scoped lang="less"></style>
